<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML5常用属性<</title>
  </head>

  <body>
    <!-- 1）contentEditable -->
    <p contenteditable="true">contentEditable</p>
    <p contenteditable="true">aaaa</p>

    <!-- 2）hidden -->
    <div class="box">box1</div>
    <div class="box" hidden>box2</div>
    <div class="box">box3</div>

    <!-- 3）data-* -->
    <p data-id="00110">这是内容</p>

    <!-- 4）multiple -->
    <select multiple>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>

    <!-- 5）required -->
    <form action="#">
      <input
        type="text"
        placeholder="请输入用户名:"
        required
      /><br /><!--必须输入-->
      <input type="password" placeholder="请输入密码:" /><br />
      <input type="submit" />
    </form>

    <!-- 6）pattern 正则匹配-->
    <form action="#">
      <input
        style="width: 400px"
        type="text"
        placeholder="请输入用户名:(输入字段范围为A-Z,a-z,0-9,4-6个字符)"
        pattern="[A-Za-z0-9]{4,6}"
        required
      /><br /><!--为正则写法-->
      <!-- 输入字段范围为A-Z,a-z,0-9  4-6个字符 -->
      <input type="password" placeholder="请输入密码:" /><br />
      <input type="submit" />
    </form>
  </body>
</html>
